<template>
    <div class="app-container">
        <div class="search-div">
            <el-form label-width="70px" size="small">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="关 键 字">
                            <el-input
                                style="width: 95%"
                                v-model="searchObj.keyword"
                                placeholder="审批编号/标题/手机号码/姓名"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="状态">
                            <el-select
                                v-model="searchObj.status"
                                placeholder="请选状态"
                                style="width: 100%"
                            >
                                <el-option
                                    v-for="item in statusList"
                                    :key="item.status"
                                    :label="item.name"
                                    :value="item.status"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="操作时间">
                            <el-date-picker
                                v-model="createTimes"
                                type="datetimerange"
                                range-separator="至"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                style="margin-right: 10px; width: 100%"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row style="display: flex">
                    <el-button
                        type="primary"
                        icon="el-icon-search"
                        size="mini"
                        :loading="loading"
                        @click="fetchData()"
                        >搜索
                    </el-button>
                    <el-button
                        icon="el-icon-refresh"
                        size="mini"
                        @click="resetData"
                        >重置</el-button
                    >
                </el-row>
            </el-form>
        </div>
        <!-- 列表 -->
        <el-table
            v-loading="listLoading"
            :data="list"
            stripe
            border
            style="width: 100%; margin-top: 10px"
        >
            <el-table-column label="序号" width="70" align="center">
                <template slot-scope="scope">
                    {{ (page - 1) * limit + scope.$index + 1 }}
                </template>
            </el-table-column>
            <el-table-column prop="processCode" label="审批编号" width="130" />
            <el-table-column prop="title" label="标题" width="180" />
            <el-table-column prop="name" label="用户" />
            <el-table-column prop="processTypeName" label="审批类型" />
            <el-table-column prop="processTemplateName" label="审批模板" />
            <el-table-column prop="description" label="描述" width="180" />
            <el-table-column label="状态">
                <template slot-scope="scope">
                    {{
                        scope.row.status === 1
                            ? "审批中"
                            : scope.row.status === 2
                            ? "完成"
                            : "驳回"
                    }}
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="160" />

            <el-table-column label="操作" width="120" align="center">
                <template slot-scope="scope">
                    <el-button
                        type="text"
                        size="mini"
                        @click="show(scope.row.id)"
                        >查看</el-button
                    >
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <el-pagination
            :current-page="page"
            :total="total"
            :page-size="limit"
            :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
            style="padding: 30px 0; text-align: center"
            layout="sizes, prev, pager, next, jumper, ->, total, slot"
            @current-change="fetchData"
            @size-change="changeSize"
        />
    </div>
</template>

<script>
import api from "@/api/process/process";

export default {
    data() {
        return {
            listLoading: true, // 数据是否正在加载
            list: null, // banner列表
            total: 0, // 数据库中的总记录数
            page: 1, // 默认页码
            limit: 10, // 每页记录数
            searchObj: {}, // 查询表单对象
            statusList: [
                { status: "1", name: "进行中" },
                { status: "2", name: "已完成" },
                { status: "-1", name: "驳回" },
            ],
            createTimes: [],
        };
    },

    // 生命周期函数：内存准备完毕，页面尚未渲染
    created() {
        console.log("list created......");
        this.fetchData();
    },

    // 生命周期函数：内存准备完毕，页面渲染成功
    mounted() {
        console.log("list mounted......");
    },

    methods: {
        // 当页码发生改变的时候
        changeSize(size) {
            console.log(size);
            this.limit = size;
            this.fetchData(1);
        },

        // 加载banner列表数据
        fetchData(page = 1) {
            console.log("翻页。。。" + page);
            // 异步获取远程数据（ajax）
            this.page = page;

            if (this.createTimes && this.createTimes.length === 2) {
                this.searchObj.createTimeBegin = this.createTimes[0];
                this.searchObj.createTimeEnd = this.createTimes[1];
            }

            api.getPageList(this.page, this.limit, this.searchObj).then(
                (response) => {
                    this.list = response.data.records;
                    this.total = response.data.total;

                    // 数据加载并绑定成功
                    this.listLoading = false;
                }
            );
        },

        // 重置查询表单
        resetData() {
            console.log("重置查询表单");
            this.searchObj = {};
            this.fetchData();
        },

        show(id) {
            console.log(id);
        },
    },
};
</script>
